import React from 'react'

const Login = () =>
{
    // 初始化表单元素
    const [form] = React.$Vant.Form.useForm()
    
    // 定义状态
    const [mobile,setMobile] = React.useState('13085962356')
    
    const [password,setPassword] = React.useState('123456')

    // 初始化路由跳转对象
    const Navigate = React.$Router.useNavigate()

    const onLogin = async () =>
    {
        if(!mobile)
        {
            React.$Vant.Notify.show({
                type:'warning',
                message:'请输入手机号'
            })

            return false
        }

        // 正则
        let MobileReg = /(^1[3|4|5|7|8][0-9]{9}$)/

        if(!MobileReg.test(mobile))
        {

            React.$Vant.Notify.show({
                type:'warning',
                message:'手机号输入有误'
            })

            return false
        }

        // 密码
        if(!password)
        {
            React.$Vant.Notify.show({
                type:'warning',
                message:'请输入密码'
            })

            return false
        }

        // 封装数据
        let data = {
            mobile:mobile,
            password:password
        }

        let result = await React.$Api.login(data)

        if(result.code === 1)
        {
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg,
                onClose:() => {

                    React.$Cookie.save('LoginUser',result.data)

                    Navigate('/user/base/index')
                }
            })

            return false
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg
            })

            return false
        }
    }

    // 更新手机号
    const UpdateMobile = (e) =>
    {
        let value = e.target.value
        
        setMobile(value)
    }

    // 更新密码
    const UpdatePassword = (e) =>
    {
        let value = e.target.value

        setPassword(value)
    }

    return (
        <>
            {/* 图标样式 */}
            <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css" />

            {/* 布局框架 */}
            <link rel="stylesheet" type="text/css" href="/assets/css/util.css" />

            {/* 主要样式 */}
            <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />

            <div className="limiter">
                <div className="container-login100" style={{backgroundImage: "url('/assets/images/img-01.jpg')"}}>
                    <div className="wrap-login100 p-t-190 p-b-30">
                        <React.$Vant.Form className="login100-form validate-form" form={form} onFinish={onLogin}>
                            <div className="login100-form-avatar">
                                <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
                            </div>

                            <span className="login100-form-title p-t-20 p-b-45">Hello</span>

                            <div className="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
                                <input className="input100" type="text" name="mobile" value={mobile} onChange={UpdateMobile} placeholder="手机号" />
                                <span className="focus-input100"></span>
                                <span className="symbol-input100">
                                    <i className="fa fa-user"></i>
                                </span>
                            </div>

                            <div className="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                                <input className="input100" type="password" name="password" value={password} onChange={UpdatePassword} placeholder="密码" />
                                <span className="focus-input100"></span>
                                <span className="symbol-input100">
                                    <i className="fa fa-lock"></i>
                                </span>
                                
                            </div>

                            <div className="container-login100-form-btn p-t-10">
                                <button type='submit' className="login100-form-btn">登 录</button>
                            </div>

                            <div className="text-center w-full p-t-30">
                                <React.$Router.NavLink className="txt1" to="/user/base/register">
                                    立即注册
                                    <i className="fa fa-long-arrow-right"></i>
                                </React.$Router.NavLink>
                            </div>
                        </React.$Vant.Form>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Login